<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="${request.contextPath}/"/>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
    <title>心愿助力</title>
    <link href="Content/wechat/css/reset.css" rel="stylesheet" type="text/css">
    <!--签到-->
    <link href="Content/wechat/css/woDeXinYuan_DSX.css" rel="stylesheet" type="text/css">

    <script src="Content/wechat/js/jquery.min.js"></script>
    <!--字体缩放-->
    <script src="Content/wechat/js/ziti.js"></script>
    <!--end 字体缩放-->
    <!--上传图片js-->
    <script  src="Content/wechat/js/svg.js"></script>
    <script src="Content/wechat/js/jquery.validate.js"></script>
    <!--微信 上传图片js-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${jsApiConfig.appId!}', // 必填，公众号的唯一标识
            timestamp: ${jsApiConfig.timestamp!}, // 必填，生成签名的时间戳
            nonceStr: '${jsApiConfig.nonceStr!}', // 必填，生成签名的随机串
            signature: '${jsApiConfig.signature!}',// 必填，签名
            jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
        });

    </script>
</head>
<body>
<header >
    <img src="Content/wechat/images/yw.jpg">
</header>
<div class="xinyuan">
    <#if (dsx) == "1">
            <div class="xinyuan_box">
                <input  type="hidden" name="id" id="id" value="${wishId}" />
                <#list wishList as item>
                <dl class="clearfix">
                    <dt>小小心愿</dt>
                    <dd>${item.wishname !}</dd>
                </dl>
                <dl class="clearfix">
                    <dt>详细信息</dt>
                    <dd>${item.content !}</dd>
                </dl>
                <dl class="clearfix">
                    <dt>求助人</dt>
                    <dd>${item.people !}</dd>
                </dl>
                <dl class="clearfix">
                    <dt>联系方式</dt>
                    <dd>${item.phone !}</dd>
                </dl>
                <dl class="clearfix">
                    <dt>所在社区</dt>
                    <dd>${item.communityname !}</dd>
                </dl>
                <dl class="clearfix">
                    <dt>心愿时间</dt>
                    <dd>${item.date?string('yyyy-MM-dd')}</dd>
                </dl>
                </#list>
            </div>
    </#if>
    <#if (dsx) != "1">
        <form id="form">
            <div class="xinyuan_box">
                <input  type="hidden" name="id" id="id" value="${wishId}" />
                <#list wishList as item>
                    <dl class="clearfix">
                        <dt>小小心愿</dt>
                        <dd>${item.wishname !}</dd>
                    </dl>
                    <dl class="clearfix">
                        <dt>详细信息</dt>
                        <dd>${item.content !}</dd>
                    </dl>
                    <dl class="clearfix">
                        <dt>求助人</dt>
                        <dd>${item.people !}</dd>
                    </dl>
                    <dl class="clearfix">
                        <dt>联系方式</dt>
                        <dd>${item.phone !}</dd>
                    </dl>
                    <dl class="clearfix">
                        <dt>所在社区</dt>
                        <dd>${item.communityname !}</dd>
                    </dl>
                    <dl class="clearfix">
                        <dt>心愿时间</dt>
                        <dd>${item.date?string('yyyy-MM-dd')}</dd>
                    </dl>
                </#list>
                <dl class="clearfix">
                    <dt>心愿助力人</dt>
                    <dd>
                        <input class="text" type="text" name="realizename" id="realizename" placeholder="请输入姓名">
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>联系方式</dt>
                    <dd>
                        <input class="text" type="text" name="realizephone" id="realizephone" placeholder="请输入电话">
                        <label hidden="hidden" id="realizename-errorsj" class="error" for="realizenamesj"></label>
                    </dd>
                </dl>
                <h4>想对ta说：</h4>
                <textarea class="textarea" name="realizecontent" id="realizecontent" placeholder="请简要说明"></textarea>
                <h4> 心愿图片（最多可上传4张）</h4>
            </div>
            <!--上传多张图片-->
            <section>

                <article>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls">
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="item">
                        <svg class="icon addImg" aria-hidden="true">
                            <use xlink:href="#icon-tianjiatupian"></use>
                        </svg>
                        <input name="url" type="button" class="upload_input" onChange="preview(this)">
                        <input type="hidden" name="uploadImgUrls" value="" class="uploadImgUrls"/>
                        <div class="preview"></div>
                        <div class="click" onClick="loadImg(this)"></div>
                        <div class="delete" onClick="deleteImg(this)">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu4"></use>
                            </svg>
                        </div>
                    </div>
                    <div style="clear: left;"></div>
                </article>
            </section>
        </form>
        <!--end 上传多张图片-->
        <div class="button_shangChuan" id="btnAdd">确定</div>
    </#if>
</div>
</body>
<script type="text/javascript">
    var btnAdd = true;
    // 预览
    var loadImg = function (obj) {
        preview(obj);
    }
    // 删除
    var deleteImg = function (obj) {
        $(obj).parent().find('input').val('');
        $(obj).parent().find('.preview').html('');
        $(obj).hide();
    }

    // 预览
    function preview(obj) {
        var prevDiv = $(obj).parent().find('.preview');
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图
                prevDiv.html('<img src="' + localIds + '" />');
                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        $(obj).parent().find('.delete').show();
                        $(obj).parent().find("input[name='uploadImgUrls']").val(res.serverId);
                    }
                });
            }
        });
    }
    $().ready(function () {
        $(".button_shangChuan").click(function () {
                if (!btnAdd) {
                    alert("保存中...");
                    return;
                }
            var realizephone = document.getElementById('realizephone').value;
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(realizephone))){
                $("#realizename-errorsj").html("请输入正确的手机号格式");
                return false;
            }
                if ($("#form").valid()) {
                    if (true) {
                        btnAdd = false;
                        $("#btnAdd").html("保存中...")

                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: "/wechat/home/party/wish/update",//url
                            data: $('#form').serialize(),
                            success: function (result) {
                                console.log(result);//打印服务端返回的数据(调试用)
                                if (result.code == 200) {
                                    window.location.href = "wechat/home/party/wish/wish_list_true"
//                                    alert(result.info);
//                                    location.reload();
                                    // var fr
                                } else {
                                    alert("请稍后再试");
                                    btnAdd = true;
                                    $("#btnAdd").html("保存中");
                                }
                            },
                            error: function () {
                                alert("异常！");
                                btnAdd = true;
                                $("#btnAdd").html("保存");
                            }
                        });
                    }
                }
            });
        $("#form").validate({
            rules: {
                realizename: {
                    required: true,
                    minlength: 2,
                    maxlength: 13,

                },
//                realizephone: {
//                    required: true,
//                    digits: "只能输入数字",
//                    number: "请输入有效的数字",
//                    minlength: 11,
//                    maxlength: 11,
//
//                },
                realizecontent: {
                    required: true,
                    minlength: 5,
                    maxlength: 500,

                }
//                ,
//                overday: {
//                    required: true,
//                    Validateoverday: true
//
//                }
            },
            messages: {
                realizename: {
                    minlength: "(字符不能少于 2 个且不能大于 13个)",
                    maxlength: "(字符不能少于 2 个且不能大于 13个)",
                },
                realizecontent: {
                    minlength: "(字符不能少于 5 个且不能大于 500个)",
                    maxlength: "(字符不能少于 5 个且不能大于 500个)",
                }
            }


        })
//        jQuery.validator.addMethod("Validateoverday", function (value, element) {
//            return this.optional(element) || (/^[1-9]\d*$/.test(value));
//        }, "请输入正整数");
    });

</script>
</html>
